<!--
	播放课程
-->
<template>
<!--	<ck-player :sourceUrl="sourceUrl"  @playStatus= "changePlayStatus"></ck-player>-->
<!--	#ABADB0-->
<el-container>
	<el-main>
		<!-- 视频位置 start -->
		<div class="box">
			<div id="video"></div>
		</div>
		<!-- 视频位置 end -->
	</el-main>
	<el-aside width="320px">
		<div class="right">
			<div class="course-info-box" v-if="studentInfoData.thisEditCourse.name">
				<div class="course-title">
					<p>{{studentInfoData.thisEditCourse.name}}</p>
					<p>教师：{{studentInfoData.thisEditCourse.teacherList[0].name}}</p>
				</div>
				<div>
					<img src="../../assets/images/course1.jpg" style="width:150px;height: 80px;" />
				</div>
			</div>
			<div class="chapter-tree">
				<el-tree
					:data="catalogueData"
					@node-click="treeClick"
					:default-expand-all="true"
					:props="{label:'catalogueText'}">
					<template #default="{ node, data }">
						<span>{{ node.label }}</span>
						<span v-if="thisCatalogueId==data.id">
							<el-icon :size="20"><clock /></el-icon>
						</span>
					</template>
				</el-tree>
			</div>
		</div>
	</el-aside>
</el-container>

</template>

<script>
// import Ckplayer from "@/components/Ckplayer";
import axios from "@/plugins/axios";
import ipconfig from "@/utils/ipconfig";
import {ElMessage} from "element-plus";

export default {
	name: "VideoPlay",
	data(){
		return {
			/*
			* 播放器对象
			* */
			player:{},
			// sourceUrl:"",
			videoObject: {
				width: '1200px', // 宽度，也可以支持百分比(不过父元素宽度要有)
				height: '800px', // 高度，也可以支持百分比
				container: "#video", //“#”代表容器的ID，“.”或“”代表容器的class
				variable: "player", //该属性必需设置，值等于下面的new chplayer()的对象
				autoplay: true, //自动播放
				video: "http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4" //视频地址(必填)
				// video: "http://106.52.78.94:8082/data/qfl.mp4" //视频地址(必填)

			},
			/**
			 * 学生登录数据
			 */
			studentInfoData:this.$store.state.studentInfoData,
			/**
			 * 目录数据
			 */
			catalogueData:[],
			thisCatalogueId:"",
		}
	},
	methods:{
		changePlayStatus(status) { //获取子组件的播放状态
			if(status) {
				this.disabledShot = false;
			} else {
				this.disabledShot = true;
				this.sourceUrl = '';
				this.checkedPontsName = '';
			}
		},
		treeClick(data,childrenNode,node){
			this.thisCatalogueId = data.id;
			//this.player.newVideo({autoplay:true,video:''});
			// 获取数据 这个目录下的资源
			axios.get(ipconfig.address+"/file/resourceList/"+data.id).then((response)=>{
				if(response.data.code==200){
					// 有数据才跳转
					if(response.data.data.length>0){
						let path=response.data.data[0].resourceUrl;
						// 这里是添加播放记录
						axios.get(ipconfig.address+"/resource/playChapter?path="+path);

						ElMessage.success(path.substring(2));
						console.log(path.substring(2));
						this.player.newVideo({autoplay:true,video:'http://localhost:8082/'+path.substring(2)});
					}else{
						ElMessage.warning("该章节下没有资源");
					}
				}else{
					ElMessage.warning(response.data.message);
				}
			}).catch((error)=>{
				console.log(error);
			});
		}
	},
	mounted() {
		// this.sourceUrl="http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4";

		this.player = new ckplayer(this.videoObject);
		try{
			let ev = document.createEvent('Event');
			ev.initEvent('resize', true, true);
			window.dispatchEvent(ev);
		}catch (e) {
		}

		this.thisCatalogueId=this.$route.query.id;

		// 在这获取资源目录数据
		axios.get(ipconfig.address+"/catalogue/catalogueList/"
			+this.studentInfoData.thisEditCourse.id+"?state=1").then((response)=>{
			if(response.data.code==200){
				this.catalogueData=response.data.data;
				ElMessage.success(response.data.message);
			}else{
				ElMessage.warning(response.data.message);
			}
		}).catch((error)=>{
			console.log(error);
		});
	},
	components:{
		// "ck-player":Ckplayer,
	},

}
</script>

<style lang="scss" scoped>
*{
	margin: 0;
	padding: 0;
}
.box{
	width: 100%;
	height: 100%;
	overflow: hidden;
}
.right{
	width: 100%;

	.course-info-box{
		height: 100px;
		background: #ABADB0;
		color: #333333;
		padding: 10px;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
		align-content: center;
	}
}
</style>